<template>
  <div class="home-container">
    <h2 style="margin-bottom: 20px;">为你推荐</h2>
    <el-row :gutter="20">
      <el-col :span="6" v-for="anime in animeList" :key="anime.id">
        <el-card :body-style="{ padding: '10px' }" @click="goDetail(anime.id)" class="anime-card">
          <el-image :src="anime.coverUrl" style="width: 100%; height: 200px;" fit="cover" />
          <h3 style="margin: 10px 0 5px;">{{ anime.title }}</h3>
          <p class="desc">{{ anime.description }}</p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getRecommendations } from '../api/recommend'
import { useRouter } from 'vue-router'

const router = useRouter()
const animeList = ref([])

onMounted(async () => {
  try {
    const userId = localStorage.getItem('userId')
    const res = await getRecommendations(userId)
    animeList.value = res.data.data
  } catch (err) {
    ElMessage.error('获取推荐失败')
  }
})

function goDetail(id) {
  router.push(`/detail/${id}`)
}
</script>

<style scoped>
.home-container {
  width: 100%;
  height: 100vh; /* 视口高度 */
  background: url('@/assets/background.jpg') no-repeat center center fixed;
  background-size: cover; /* 覆盖整个页面 */
}
.anime-card {
  cursor: pointer;
  transition: all 0.3s;
}
.anime-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.desc {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}
</style>
